import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sleep_manager/ui/widget/custom_app_bar.dart';

/// 浏览记录
class RecordListPage extends StatefulWidget {

  const RecordListPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _RecordListPageState();
  }

}

class _RecordListPageState extends State<RecordListPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(title: "浏览记录"),
      body: Container(
        color: const Color(0xFFF7F7F7),
        child: Container(
          margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 8,
                    spreadRadius: 2,
                    offset: const Offset(4, 4))
              ]),
          child: Column(
            children: [
              const Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Text(
                    '王多鱼',
                    style: TextStyle(fontSize: 12),
                  ),
                  Icon(
                    Icons.arrow_drop_down_rounded,
                    size: 30,
                  )
                ],
              ),
              Expanded(
                flex: 1,
                child: ListView.builder(
                    itemCount: 6,
                    itemBuilder: (context, index) {
                      return _buildCustomListItem(context, index);
                    }),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCustomListItem(BuildContext context, int index) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.only(right: 16),
        child: Row(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 10),
              child: Image.asset('assets/images/record_list_item_icon.png',width: 35, height: 35),
            ),
            Expanded(
              flex: 1,
              child: Column(
                children: [
                  Container(
                    margin: const EdgeInsets.only(top: 20),
                    child: Row(
                      children: [
                        const SizedBox(width: 12),
                        const Text(
                          '睡眠监测',
                          style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold
                          ),
                        ),
                        const SizedBox(width: 30),
                        SvgPicture.asset('assets/images/record_item_boxing.svg', width: 18, height: 18),
                        const SizedBox(width: 10),
                        SvgPicture.asset('assets/images/record_item_baogao.svg', width: 18, height: 18),
                        const SizedBox(width: 10),
                        SvgPicture.asset('assets/images/record_item_fenxi.svg', width: 18, height: 18),
                        const SizedBox(width: 10),
                        SvgPicture.asset('assets/images/record_item_doctor.svg', width: 18, height: 18),
                      ],
                    )
                  ),
                  Container(
                    margin: const EdgeInsets.fromLTRB(12, 10, 0,0),
                    alignment: Alignment.centerLeft,
                    child: const Text(
                      '2024-03-21 18:00 - 2024-03-22 06:30',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                        fontWeight: FontWeight.w600
                      ),
                    ),
                  ),
                  Container(
                    height: 1,
                    color: const Color(0xFFEAEAEA),
                    margin: const EdgeInsets.only(top: 16),
                  )
                ],
              ),
            ),
            const SizedBox(width: 10),
            const Icon(Icons.arrow_forward_ios, color: Color(0xFF343965), size: 18)
          ],
        ),
      ),
    );
  }
}
